<template>
  <div class="entered">
    <el-row>
      <el-col :span="2" :xs="0">
        <el-tabs
          class="tab-left"
          :tab-position="tabPosition"
          v-model="business"
        >
          <el-tab-pane label="电商" name="retailers">
            <span slot="label"
              ><i class="el-icon-shopping-cart-full"></i>&nbsp;&nbsp;电商</span
            >
          </el-tab-pane>
          <!--          <el-tab-pane label="快递" name="express">-->
          <!--            <span slot="label"-->
          <!--              ><i class="el-icon-takeaway-box"></i>&nbsp;&nbsp;快递</span-->
          <!--            >-->
          <!--          </el-tab-pane>-->
          <!--          <el-tab-pane label="代发" name="Consignment">-->
          <!--            <span slot="label"-->
          <!--              ><i class="el-icon-box"></i>&nbsp;&nbsp;代发</span-->
          <!--            >-->
          <!--          </el-tab-pane>-->
        </el-tabs>
      </el-col>
      <el-col :span="22" :xs="24">
        <el-row>
          <el-tabs v-model="status" type="card">
            <el-tab-pane name="PendingItems">
              <span slot="label"
                >已录入<span style="color: red"
                  >({{ numObj.PendingItems }})</span
                ></span
              >
            </el-tab-pane>
            <el-tab-pane name="ToBeIssued">
              <span slot="label"
                >已下单<span style="color: red"
                  >({{ numObj.ToBeIssued }})</span
                ></span
              >
            </el-tab-pane>
            <!--            <el-tab-pane label="已发出" name="ToBeStored"></el-tab-pane>-->
            <el-tab-pane :label="`已入库(${numObj.Received})`" name="Received">
              <span slot="label"
                >已入库<span style="color: red"
                  >({{ numObj.Received }})</span
                ></span
              >
            </el-tab-pane>
            <!--            <el-tab-pane label="库内作业中" name="Processing"></el-tab-pane>-->
            <el-tab-pane :label="`已出库(${numObj.Outbound})`" name="Outbound">
              <span slot="label"
                >已出库<span style="color: red"
                  >({{ numObj.Outbound }})</span
                ></span
              >
            </el-tab-pane>
            <el-tab-pane
              :label="`正在清关(${numObj.StartCustoms})`"
              name="StartCustoms"
            >
              <span slot="label"
                >正在清关<span style="color: red"
                  >({{ numObj.StartCustoms }})</span
                ></span
              >
            </el-tab-pane>
            <el-tab-pane
              :label="`清关完成(${numObj.EndCustoms})`"
              name="EndCustoms"
            >
              <span slot="label"
                >清关完成<span style="color: red"
                  >({{ numObj.EndCustoms }})</span
                ></span
              >
            </el-tab-pane>
            <el-tab-pane :label="`派送中(${numObj.Delivery})`" name="Delivery">
              <span slot="label"
                >派送中<span style="color: red"
                  >({{ numObj.Delivery }})</span
                ></span
              >
            </el-tab-pane>
            <el-tab-pane label="派送完成" name="Complete"></el-tab-pane>
            <el-tab-pane label="异常件" name="Error">
              <span slot="label"
                >异常件<span style="color: red"
                  >({{ numObj.Error }})</span
                ></span
              >
            </el-tab-pane>
          </el-tabs>
        </el-row>
        <el-row>
          <el-col :span="24" style="height: auto">
            <div v-if="search_visible" id="search" class="search">
              <el-form ref="form" :model="searchData">
                <el-row :gutter="10">
                  <el-col :span="4">
                    <el-form-item>
                      <el-select
                        style="display: block"
                        v-model="searchData.shop_id"
                        placeholder="请选择店铺"
                      >
                        <el-option
                          v-for="item in shop_ids"
                          :key="item.val"
                          :value="item.val"
                          :label="item.key"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="4">
                    <el-form-item>
                      <el-input
                        v-model="orderId"
                        placeholder="请输入单号"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <!--                 <el-col :span="5">-->
                  <!--                    <el-form-item>-->
                  <!--                      <search-tool-->
                  <!--                        :search_data.sync="searchData"-->
                  <!--                        @refesh_list="getOrderList"-->
                  <!--                      ></search-tool>-->
                  <!--                    </el-form-item>-->
                  <!--                  </el-col>-->
                  <el-col :span="5">
                    <el-form-item>
                      <el-date-picker
                        clearable
                        v-model="value"
                        type="datetimerange"
                        align="right"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="timestamp"
                        :default-time="['00:00:00', '23:59:59']"
                        @change="changeTime"
                      >
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="3">
                    <el-form-item>
                      <el-button
                        size="small"
                        type="primary"
                        @click="getOrderList"
                        ><i class="el-icon-search"></i> 查询
                      </el-button>
                      <el-button
                        size="small"
                        icon="el-icon-refresh-left"
                        @click="reset"
                        >重置
                      </el-button>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
            <!-- 工具栏 -->
            <div style="text-align: right">
              <!-- 工具栏 -->
              <div class="sku_header_left">
                <div>
                  <el-button
                    type="primary"
                    size="mini"
                    class="el-icon-document-checked"
                    @click="ConfirmAllOrder"
                    v-if="status === 'PendingItems'"
                  >
                    确认订单
                  </el-button>
                  <el-button
                    type="primary"
                    size="mini"
                    class="el-icon-printer"
                    @click="ExportAllOrder"
                  >
                    订单导出
                  </el-button>
                  <el-button
                    v-if="status === 'ToBeIssued'"
                    type="primary"
                    size="mini"
                    class="el-icon-printer"
                    @click="printAll"
                  >
                    打印面单
                  </el-button>
                  <el-button
                    type="primary"
                    size="mini"
                    class="el-icon-delete"
                    @click="delAllOrder"
                    v-if="status === 'PendingItems'"
                  >
                    批量删除
                  </el-button>
                </div>
                <div>
                  <TableTool
                    :search_visible.sync="search_visible"
                    @refesh_list="getOrderList"
                  ></TableTool>
                </div>
              </div>
            </div>
          </el-col>
          <el-table
            v-loading="loading"
            element-loading-text="拼命加载中..."
            element-loading-background="rgba(0, 0, 0, 0.4)"
            :height="
              search_visible
                ? $store.state.user.clientHeight - 320
                : $store.state.user.clientHeight - 290
            "
            :header-cell-style="{
              background: '#f5fafa',
              color: '#14142B',
              height: '28px',
              padding: '5px 0',
            }"
            :cell-style="{
              color: '#606266',
              fontSize: '13px',
              padding: '7px 0',
            }"
            :data="tableData"
            border
            style="width: 100%"
            @selection-change="selection"
          >
            <template slot="empty">
              <img
                class="empty-img"
                src="@/assets/imgs/zanwushuju.svg"
                style="width: 64px; height: 50px"
                alt=""
              />
              <div class="noCart">暂无数据</div>
            </template>
            <el-table-column
              type="selection"
              label=""
              width="60"
              :key="Math.random()"
            ></el-table-column>
            <el-table-column
              type="index"
              width="60px"
              label="序号"
              :key="Math.random()"
            ></el-table-column>

            <el-table-column label="单号" min-width="190" :key="Math.random()">
              <template slot-scope="scope">
                <div style="text-align: left">
                  <span
                    style="width: 70px; display: inline-block; color: #999999"
                    >和兴单号：</span
                  ><span style="color: #67c23a">{{
                    scope.row.storage_No
                  }}</span>
                </div>
                <div style="text-align: left" v-if="scope.row.orderReceipt">
                  <span
                    style="width: 70px; display: inline-block; color: #999999"
                    >客户单号：</span
                  ><span>{{ scope.row.orderReceipt.customer_No }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column min-width="150" align="left" label="货运单号">
              <template slot-scope="scope">
                <div
                  v-for="(item, index) in scope.row.orderDeliver"
                  :key="index"
                >
                  {{ item.invoice_No }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="channelTitle"
              label="产品渠道"
              min-width="120"
              :key="Math.random()"
            >
              <template slot-scope="scope">
                <span class="label_font">{{
                  scope.row.channelReceipt.channel_title
                }}</span>
                <!--                <span style="margin: 0 3px">/</span-->
                <!--                ><span class="label_font">{{-->
                <!--                  scope.row.channelDeliver.channel_title-->
                <!--                }}</span>-->
              </template>
            </el-table-column>
            <el-table-column
              prop="receiver"
              min-width="230"
              :key="Math.random()"
              label="收件人信息"
            >
              <template slot-scope="scope">
                <div class="shopInfo">
                  <div>
                    <span class="label_name">收货人：</span
                    ><span
                      class="label_val"
                      v-if="scope.row.orderReceipt.receipt_msg.receipt"
                      >{{
                        scope.row.orderReceipt.receipt_msg.receipt.en
                      }}&nbsp;{{
                        scope.row.orderReceipt.receipt_msg.receipt.kr
                      }}</span
                    >
                    <span v-else>-</span>
                  </div>
                  <div>
                    <span class="label_name">联系方式：</span
                    ><span
                      class="label_val"
                      v-if="scope.row.orderReceipt.receipt_msg.Tel"
                      >{{ scope.row.orderReceipt.receipt_msg.Tel }}</span
                    >
                  </div>
                  <div>
                    <span class="label_name">通关符：</span
                    ><span
                      style="color: #0cc50c"
                      class="label_val"
                      v-if="scope.row.orderReceipt.receipt_msg.PCC"
                      >{{ scope.row.orderReceipt.receipt_msg.PCC }}</span
                    >
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="waybillNo"
              v-if="status === 'PendingItems' || status === 'ToBeIssued'"
              label="国内物流单号"
              :key="Math.random()"
              min-width="150"
            >
              <template slot-scope="scope">
                <div>
                  <div
                    style="color: #2e82ff; font-size: 12px"
                    class="label_val"
                    v-for="(item, index) in scope.row.waybill"
                    :key="index + 'ikoiio'"
                  >
                    {{
                      item.waybill_No
                    }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
                      v-if="item.status === 0"
                      style="color: red; float: right"
                      >（未揽件）</span
                    >
                    <span
                      v-if="item.status === 1"
                      style="color: #0cc50c; float: right"
                      >（已揽件）</span
                    >
                  </div>
                  <span v-if="scope.row.waybill.length === 0" class="label_font"
                    >未填写</span
                  >
                  <span
                    ><i
                      v-if="
                        status === 'PendingItems' ||
                        status === 'ToBeIssued' ||
                        status === 'ToBeStored'
                      "
                      @click="editOrderer(scope.row, true)"
                      style="color: #2e82ff"
                      class="el-icon-edit"
                    ></i
                  ></span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="orderReceipt.order_receipt_type"
              label="订单来源"
              :key="Math.random()"
              min-width="100"
            ></el-table-column>

            <el-table-column
              v-if="status === 'PendingItems'"
              align="center"
              label="PCC验证"
              width="150"
            >
              <template v-slot="scope">
                <el-tag
                  type="success"
                  v-if="scope.row.orderReceipt.error_msg.PCC === 'pass'"
                  >通过
                </el-tag>
                <el-button
                  @click="fill_pcc(scope.row)"
                  icon="el-icon-edit"
                  size="mini"
                  type="danger"
                  v-else-if="scope.row.orderReceipt.error_msg.PCC === 'refuse'"
                  >拒绝
                </el-button>
                <el-tag
                  type="warning"
                  v-else-if="scope.row.orderReceipt.error_msg.PCC === 'wait'"
                  >待验证
                </el-tag>
                <el-button
                  @click="fill_pcc(scope.row)"
                  icon="el-icon-edit"
                  size="mini"
                  type="danger"
                  v-else-if="
                    scope.row.orderReceipt.error_msg.PCC === 'Incomplete'
                  "
                  >信息不完整
                </el-button>
                <el-button
                  @click="fill_pcc(scope.row)"
                  icon="el-icon-edit"
                  size="mini"
                  type="danger"
                  v-else-if="scope.row.orderReceipt.error_msg.PCC === 'fail'"
                  >补全失败
                </el-button>
              </template>
            </el-table-column>
            <el-table-column
              v-if="status === 'PendingItems'"
              label="地址校验状态"
              align="center"
              width="150"
            >
              <template slot-scope="scope">
                <el-button
                  v-if="scope.row.orderReceipt.error_msg.ADDRESS === 'refuse'"
                  @click="fill_adress(scope.row)"
                  icon="el-icon-edit"
                  size="mini"
                  type="danger"
                  >地址校验失败
                </el-button>
                <el-tag
                  v-if="scope.row.orderReceipt.error_msg.ADDRESS === 'pass'"
                  type="success"
                  >地址校验通过
                </el-tag>
              </template>
            </el-table-column>

            <!--            <el-table-column-->
            <!--              min-width="160"-->
            <!--              v-if="status === 'PendingItems'"-->
            <!--              prop="error_msg"-->
            <!--              :key="Math.random()"-->
            <!--              label="校验状态"-->
            <!--              align="center"-->
            <!--            >-->
            <!--              <template slot-scope="scope">-->
            <!--                <div>-->
            <!--                  <el-tag-->
            <!--                    type="success"-->
            <!--                    v-if="scope.row.orderReceipt.error_msg.PCC === 'pass'"-->
            <!--                    >PCC通过-->
            <!--                  </el-tag>-->
            <!--                  <el-tag-->
            <!--                    type="danger"-->
            <!--                    v-else-if="-->
            <!--                      scope.row.orderReceipt.error_msg.PCC === 'refuse'-->
            <!--                    "-->
            <!--                    >PCC错误-->
            <!--                  </el-tag>-->
            <!--                  <el-tag-->
            <!--                    type="warning"-->
            <!--                    v-else-if="scope.row.orderReceipt.error_msg.PCC === 'wait'"-->
            <!--                    >PCC待验证-->
            <!--                  </el-tag>-->
            <!--                  &lt;!&ndash;                @click="fill_pcc(scope.row)"&ndash;&gt;-->
            <!--                  &lt;!&ndash;                icon="el-icon-edit"&ndash;&gt;-->
            <!--                  <el-tag-->
            <!--                    type="danger"-->
            <!--                    v-else-if="scope.row.orderReceipt.error_msg.PCC === 'fail'"-->
            <!--                    >PCC补全失败-->
            <!--                  </el-tag>-->
            <!--                  <el-tag-->
            <!--                    type="danger"-->
            <!--                    v-else-if="-->
            <!--                      scope.row.orderReceipt.error_msg.PCC === 'Incomplete'-->
            <!--                    "-->
            <!--                    >信息不完整-->
            <!--                  </el-tag>-->
            <!--                </div>-->
            <!--                <div>-->
            <!--                  <el-button-->
            <!--                    v-if="scope.row.orderReceipt.error_msg.ADDRESS === 'refuse'"-->
            <!--                    @click="fill_pcc(scope.row)"-->
            <!--                    icon="el-icon-edit"-->
            <!--                    size="mini"-->
            <!--                    type="danger"-->
            <!--                    >地址校验失败-->
            <!--                  </el-button>-->
            <!--                  <el-tag-->
            <!--                    v-if="scope.row.orderReceipt.error_msg.ADDRESS === 'pass'"-->
            <!--                    type="success"-->
            <!--                    >地址校验通过-->
            <!--                  </el-tag>-->
            <!--                  <el-tag-->
            <!--                    v-if="scope.row.orderReceipt.error_msg.ADDRESS === 'wait'"-->
            <!--                    type="warning"-->
            <!--                    >地址待校验-->
            <!--                  </el-tag>-->
            <!--                </div>-->
            <!--              </template>-->
            <!--            </el-table-column>-->
            <el-table-column
              v-if="status === 'PendingItems'"
              prop="create_time"
              :key="Math.random()"
              label="创建时间"
              width="150"
            ></el-table-column>
            <!--            <el-table-column-->
            <!--              v-if="status === 'ToBeIssued'"-->
            <!--              :key="Math.random()"-->
            <!--              align="left"-->
            <!--              label="通关编码状态"-->
            <!--              width="120"-->
            <!--            >-->
            <!--              <template slot-scope="scope">-->
            <!--                <el-tag type="success" v-if="scope.row.error_msg.PCC === 'pass'"-->
            <!--                  >通过-->
            <!--                </el-tag>-->
            <!--                <el-tag-->
            <!--                  type="danger"-->
            <!--                  v-else-if="scope.row.error_msg.PCC === 'refuse'"-->
            <!--                  >错误-->
            <!--                </el-tag>-->
            <!--                <el-tag-->
            <!--                  type="warning"-->
            <!--                  v-else-if="scope.row.error_msg.PCC === 'wait'"-->
            <!--                  >待验证-->
            <!--                </el-tag>-->
            <!--              </template>-->
            <!--            </el-table-column>-->
            <el-table-column
              v-if="status !== 'PendingItems'"
              prop="create_time"
              :key="Math.random()"
              label="下单时间"
              min-width="150"
            ></el-table-column>
            <el-table-column
              v-if="status === 'PendingItems' || status === 'ToBeIssued'"
              :key="Math.random()"
              min-width="130"
              label="系统反馈"
            >
              <!--              (通过：pass，拒绝：refuse，等待：wait，不完整：Incomplete，补全失败：fail)-->
              <template slot-scope="scope">
                <div v-if="scope.row.orderReceipt.error_msg.ADDRESS">
                  <span>1.地址校验：</span>
                  <span
                    v-if="scope.row.orderReceipt.error_msg.ADDRESS === 'pass'"
                    >通过</span
                  >
                  <span
                    v-else-if="
                      scope.row.orderReceipt.error_msg.ADDRESS === 'refuse'
                    "
                    >拒绝</span
                  >
                  <span
                    v-else-if="
                      scope.row.orderReceipt.error_msg.ADDRESS === 'wait'
                    "
                    >等待</span
                  >
                  <span
                    v-else-if="
                      scope.row.orderReceipt.error_msg.ADDRESS === 'Incomplete'
                    "
                    >不完整</span
                  >
                  <span
                    v-else-if="
                      scope.row.orderReceipt.error_msg.ADDRESS === 'fail'
                    "
                    >补全失败</span
                  >
                </div>
                <div v-if="scope.row.orderReceipt.error_msg.PCC">
                  <span>2.PCC校验：</span>
                  <span v-if="scope.row.orderReceipt.error_msg.PCC === 'pass'"
                    >通过</span
                  >
                  <span
                    v-else-if="
                      scope.row.orderReceipt.error_msg.PCC === 'refuse'
                    "
                    >拒绝</span
                  >
                  <span
                    v-else-if="scope.row.orderReceipt.error_msg.PCC === 'wait'"
                    >等待</span
                  >
                  <span
                    v-else-if="
                      scope.row.orderReceipt.error_msg.PCC === 'Incomplete'
                    "
                    >不完整</span
                  >
                  <span
                    v-else-if="scope.row.orderReceipt.error_msg.PCC === 'fail'"
                    >补全失败</span
                  >
                </div>
              </template>
            </el-table-column>
            <el-table-column
              v-if="
                status !== 'Outbound' &&
                status !== 'StartCustoms' &&
                status !== 'EndCustoms' &&
                status !== 'Delivery' &&
                status !== 'Complete' &&
                status !== 'PendingItems' &&
                status !== 'ToBeIssued'
              "
              prop="error_msg"
              :key="Math.random()"
              min-width="130"
              label="系统反馈"
            >
              <template slot-scope="scope">
                <!--                <div-->
                <!--                  v-for="(item, index) in scope.row.arr"-->
                <!--                  :key="index"-->
                <!--                  style="text-align: left; margin-left: 15px"-->
                <!--                >-->
                <!--                  <span>{{ index + 1 }}、</span><span>{{ item.label }}:</span>-->
                <!--                  <span> {{ item.value }} </span>-->
                <!--                </div>-->
                <div v-if="scope.row.orderReceipt.error_msg.DELIVER">
                  {{ scope.row.orderReceipt.error_msg.DELIVER }}
                </div>
              </template>
            </el-table-column>
            <!--            <el-table-column-->
            <!--              v-if="status === 'Outbound'"-->
            <!--              prop="orderTrack.receipt"-->
            <!--              :key="Math.random()"-->
            <!--              label="当前轨迹"-->
            <!--              width=""-->
            <!--            ></el-table-column>-->
            <el-table-column
              align="center"
              width="150"
              prop="status"
              label="轨迹状态"
            >
              <template slot-scope="scope">
                <div>
                  <el-tooltip placement="top" effect="light">
                    <div slot="content" v-if="scope.row.orderTrack">
                      <div
                        style="margin-bottom: 10px"
                        v-for="(item, index) in scope.row.orderTrack"
                        :key="index"
                      >
                        {{ index + 1 }}. {{ item.msg }}:{{
                          dateFormat(item.time)
                        }}
                      </div>
                    </div>
                    <span
                      v-if="scope.row.orderReceipt.status === 'PendingItems'"
                      >已录入</span
                    >
                    <span
                      v-else-if="scope.row.orderReceipt.status === 'ToBeIssued'"
                      >待发出/已下单</span
                    >
                    <span
                      v-else-if="scope.row.orderReceipt.status === 'ToBeStored'"
                      >待揽件</span
                    >
                    <span
                      v-else-if="scope.row.orderReceipt.status === 'Received'"
                      >已入库</span
                    >
                    <span
                      style="color: red"
                      v-else-if="scope.row.orderReceipt.status === 'Error'"
                      >派送失败</span
                    >
                    <span
                      v-else-if="
                        scope.row.orderReceipt.status === 'ToTransferred'
                      "
                      >待转仓</span
                    >
                    <span
                      v-else-if="
                        scope.row.orderReceipt.status === 'IsTransferred'
                      "
                      >已转仓</span
                    >
                    <span
                      v-else-if="scope.row.orderReceipt.status === 'Pending'"
                      >待处理</span
                    >
                    <span
                      v-else-if="scope.row.orderReceipt.status === 'Processing'"
                      >处理中</span
                    >
                    <span
                      v-else-if="scope.row.orderReceipt.status === 'Outbound'"
                      >出库</span
                    >
                    <span
                      v-else-if="
                        scope.row.orderReceipt.status === 'DepartureSite'
                      "
                      >出发机场/港口</span
                    >
                    <span
                      v-else-if="scope.row.orderReceipt.status === 'Sending'"
                      >开始运输</span
                    >
                    <span
                      v-else-if="
                        scope.row.orderReceipt.status === 'ArrivingSite'
                      "
                      >到达机场/港口</span
                    >
                    <span
                      v-else-if="
                        scope.row.orderReceipt.status === 'StartCustoms'
                      "
                      >开始清关</span
                    >
                    <span
                      v-else-if="scope.row.orderReceipt.status === 'EndCustoms'"
                      >清关完成</span
                    >
                    <span
                      v-else-if="
                        scope.row.orderReceipt.status === 'ReceiveGoods'
                      "
                      >已揽收</span
                    >
                    <span
                      v-else-if="scope.row.orderReceipt.status === 'Delivery'"
                      >派送中</span
                    >
                    <span
                      v-else-if="scope.row.orderReceipt.status === 'Complete'"
                      >派送完成</span
                    >
                    <span
                      v-else-if="scope.row.orderReceipt.status === 'chargeBack'"
                      >退件</span
                    >
                  </el-tooltip>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="orderReceipt.delivery_value.Collection"
              label="代收款"
              width="100px"
            >
              <template
                slot-scope="scope"
                v-if="scope.row.orderReceipt.delivery_value.Collection"
              >
                <i style="font-weight: bold; color: #0cc50c">₩&nbsp;</i
                ><span style="color: #0cc50c">{{
                  scope.row.orderReceipt.delivery_value.Collection
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              width="200"
              align="left"
              fixed="right"
              label="操作"
              :key="Math.random()"
            >
              <template slot-scope="scope">
                <div>
                  <el-button
                    v-if="status === 'PendingItems'"
                    @click="ConfirmOrder(scope.row.storage_order_id,scope.row.orderReceipt.status)"
                    type="text"
                    size="small"
                    >确认下单
                  </el-button>
                  <el-button
                    @click="detailOrder(scope.row)"
                    type="text"
                    size="small"
                    >详情
                  </el-button>
                  <el-button
                    @click="ExportOrder(scope.row.storage_order_id)"
                    type="text"
                    size="small"
                    >导出
                  </el-button>
                  <el-button
                    v-if="status === 'ToBeIssued'"
                    @click=""
                    type="text"
                    size="small"
                    @click="clickPrintOrder(scope.row)"
                  >
                    打印面单
                  </el-button>
                  <el-button
                    v-if="status === 'Outbound'"
                    @click=""
                    type="text"
                    size="small"
                    >轨迹
                  </el-button>
                  <el-button
                    v-if="status === 'PendingItems' || status === 'Error'"
                    @click="delOrder(scope.row.storage_order_id)"
                    type="text"
                    size="small"
                    style="color: red"
                  >删除
                  </el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页器 -->
          <Pagination
            :child-msg="pageparm"
            @callFather="callFather"
          ></Pagination>
        </el-row>
      </el-col>
    </el-row>
    <OrdererModal
      @submit="submitClick"
      @closeForm="closeDialog"
      :dialogVisible.sync="dialogVisible"
      :editData="editData"
      :dialogTitle="dialogTitle"
    ></OrdererModal>
    <DetailModal
      @submit="submitClick1"
      @closeForm="closeDialog1"
      :dialogVisible.sync="dialogVisible1"
      :editData="editData1"
      :dialogTitle="dialogTitle1"
    >
    </DetailModal>
    <fillPccModule
      @submit="submitClick2"
      @closeForm="closeDialog2"
      :dialogVisible.sync="dialogVisible2"
      :editData="editData2"
      :dialogTitle="dialogTitle2"
    ></fillPccModule>
    <fillAdress
      @submit="submitClick3"
      @closeForm="closeDialog3"
      :dialogVisible.sync="dialogVisible3"
      :editData="editData3"
      :dialogTitle="dialogTitle3"
    >
    </fillAdress>
  </div>
</template>

<script>
import {
  confirmOrder,
  delOrder,
  exportOrder,
  getOrderList,
  upOrder,
  upWaybillNo,
  printOrder,
  addressCheck,
  getNavNum,
} from "@/api/entered";
import OrdererModal from "./components/editNumber.vue";
import DetailModal from "@/views/order/entered/components/detailModal.vue";
import fillPccModule from "@/views/order/entered/components/fillPccModule.vue";
import fillAdress from "@/views/order/entered/components/fillAdress.vue";
import { dateFormat } from "@/utils/filters";

export default {
  name: "index",
  components: { OrdererModal, DetailModal, fillPccModule, fillAdress },
  data() {
    return {
      value: "",
      businessList: [],
      searchData: {
        startTime: null,
        endTime: null,
      },
      tabPosition: "left",
      business: "retailers",
      status: "PendingItems",
      percentage: 0,
      loading: false,
      total: 0,
      search_visible: true,
      tableData: [],
      formInline: {
        page: 1,
        limit: 20,
      },
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 20,
        total: 0,
      },
      shop_ids: [],
      srcList: [],
      order_receipt_ids: [],
      invoice_No_List: [],
      dialogVisible: false,
      dialogTitle: "",
      editData: {},
      dialogVisible1: false,
      dialogTitle1: "",
      editData1: {},
      dialogVisible2: false,
      dialogTitle2: "",
      editData2: {},
      dialogVisible3: false,
      dialogTitle3: "",
      editData3: {},
      orderId: "",
      customerId: "",
      numObj: {},
    };
  },
  mounted() {
    this.getOrderList();
    this.getNavNum();
  },
  computed: {
    orderIds: function () {
      let arr = [];
      if (this.orderId === "") {
        return null;
      } else {
        this.orderId
          .replace(/[,\s]+/gim, ",")
          .split(",")
          .filter((item) => {
            arr.push(item);
          });
        return arr;
      }
    },
    customerIds: function () {
      let arr = [];
      if (this.customerId === "") {
        return [];
      } else {
        this.customerId
          .replace(/[,\s]+/gim, ",")
          .split(",")
          .filter((item) => {
            arr.push(item);
          });
        return arr;
      }
    },
  },
  methods: {
    dateFormat,
    reset() {
      this.orderId = "";
      this.customerId = "";
      this.value = null;
      this.getOrderList();
    },
    clickPrintOrder(row) {
      this.printOrder([row.storage_No]);
    },
    printAll() {
      if (this.invoice_No_List.length > 0) {
        this.printOrder(this.invoice_No_List);
      } else {
        this.$message({
          type: "warning",
          message: "请先选择运单",
        });
      }
    },
    //导出面单
    printOrder(order) {
      printOrder({ invoice_No: order }).then((res) => {
        if (res.status === 200) {
          window.open(res.data.data);
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
    //分页插件
    callFather(parm) {
      this.formInline.page = parm.currentPage;
      this.formInline.limit = parm.pageSize;
      this.getOrderList({ status: this.status });
    },
    //---------------------------批量选择--------------------------
    selection(rows) {
      this.order_receipt_ids = [];
      this.invoice_No_List = [];
      rows.forEach((item) => {
        this.order_receipt_ids.push(item.storage_order_id);
        this.invoice_No_List.push(item.storage_No);
      });
    },
    //异步请求
    async getOrderList() {
      let obj = {};
      if (this.status === "Error") {
        obj = {
          error_status: "Error",
          business: this.business,
        };
      } else {
        obj = {
          status: this.status,
          business: this.business,
        };
      }
      this.loading = true;
      try {
        Object.assign(obj, this.searchData, this.formInline, {
          invoiceNo: this.orderIds,
        });
        const res = await getOrderList(obj);
        if (res.data.status === 200) {
          let data = JSON.parse(JSON.stringify(res.data.data.data));
          data.forEach((item) => {
            let arr = [];
            for (const key in item.orderReceipt.error_msg) {
              arr.push({ label: key, value: item.orderReceipt.error_msg[key] });
              item.arr = arr;
            }
          });
          this.tableData = data;
          this.pageparm.currentPage = res.data.data.current_page;
          this.pageparm.total = res.data.data.total;
          this.pageparm.pageSize = res.data.data.per_page;
        } else {
          this.$message.error(res.data.msg);
        }
        this.loading = false;
      } catch (error) {
        this.loading = false;
        this.$message.error("系统错误");
      }
    },
    //-------------------------功能-------------------
    editOrderer(row, flag) {
      if (flag) {
        this.dialogVisible = true;
        this.dialogTitle = "国内物流单号";
        this.editData = row;
      } else {
        this.dialogVisible = true;
        this.dialogTitle = "收货人信息";
        this.editData = row;
      }
    },
    //-----------------弹窗修改-------------
    submitClick(val) {
      this.upWaybillNo(val);
    },
    async upWaybillNo(obj) {
      const res = await upWaybillNo(Object.assign(obj));
      if (res.data.status === 200) {
        this.$message({
          type: "success",
          message: res.data.msg,
        });
        this.getOrderList();
      } else {
        this.$message({
          type: "error",
          message: res.data.msg,
        });
      }
    },
    //批量确认
    ConfirmAllOrder() {
      if (this.order_receipt_ids.length > 0) {
        this.confirmOrder(this.order_receipt_ids);
      } else {
        this.$message({
          type: "warning",
          message: "请选择订单",
        });
      }
    },
    ConfirmOrder(id,status) {
      let ids = [id];
      let statuss = [status];
      this.confirmOrder(ids,statuss);

    },
    //确认下单
    async confirmOrder(ids,status) {
      const res = await confirmOrder({ ids: ids,status:status});
      if (res.data.status === 200) {
        this.$message({
          dangerouslyUseHTMLString: true,
          type: "success",
          message: res.data.msg,
          duration: 3000,
          showClose: true,
        });
        this.getOrderList();
      } else {
        this.$message({
          dangerouslyUseHTMLString: true,
          type: "error",
          message: res.data.msg,
          duration: 3000,
          showClose: true,
        });
      }
    },
    //批量导出
    ExportAllOrder() {
      if (this.order_receipt_ids.length > 0) {
        this.exportOrder(this.order_receipt_ids);
      } else {
        this.$message({
          type: "warning",
          message: "请选择订单",
        });
      }
    },
    ExportOrder(id) {
      let ids = [id];
      this.exportOrder(ids);
    },
    async exportOrder(ids) {
      const res = await exportOrder({
        storage_order_id: ids,
        status: this.status,
      });

      if (res.data.status === 200) {
        this.$message({
          type: "success",
          message: res.data.msg,
        });
        let baseURL =
          process.env.NODE_ENV == "development" ? "http://" : "https://";
        window.open(`${baseURL}${res.data.url}`);
        this.getOrderList();
      } else {
        this.$message({
          type: "error",
          message: res.data.msg,
        });
      }
    },
    //批量删除
    delAllOrder() {
      if (this.order_receipt_ids.length > 0) {
        this.delete({ ids: this.order_receipt_ids });
      } else {
        this.$message({
          type: "warning",
          message: "请选择订单",
        });
      }
    },
    //订单删除
    delOrder(id) {
      let ids = [id];
      this.delete({ ids: ids, type: "real" });
    },
    delete(obj) {
      //删除货架
      this.$confirm("确定操作吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        const res = await delOrder(obj);
        if (res.data.status === 200) {
          this.$message({
            type: "success",
            message: res.data.msg,
          });
          this.getOrderList();
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
          });
        }
      });
    },
    //详情
    detailOrder(row) {
      this.editData1 = row;
      if(row.orderItem.length<=0){
        row.orderItem = [{
          product_title:{en:'',zh:''},
          amount:undefined,
          univalent:undefined,
          hscode:undefined,
          WebUrl:''
        }]
      }
      this.dialogVisible1 = true;
      this.dialogTitle1 = "运单详情";
    },
    submitClick1(val) {
      this.upOrder(val);
    },
    //修改详情
    async upOrder(obj) {
      const res = await upOrder(obj);
      if (res.data.status === 200) {
        this.$message({
          type: "success",
          message: res.data.msg,
        });
        this.getOrderList();
      } else {
        this.$message({
          type: "error",
          message: res.data.msg,
        });
      }
    },
    //关闭弹窗
    closeDialog1() {
      this.dialogVisible1 = false;
    },
    //关闭弹窗
    closeDialog() {
      this.dialogVisible = false;
    },
    //-----------------修改PCC---------------
    fill_pcc(row) {
      this.editData2 = row;
      this.dialogVisible2 = true;
      this.dialogTitle2 = "PCC校验";
    },
    //-----------------修改地址---------------
    fill_adress(row) {
      this.editData3 = row;
      this.dialogVisible3 = true;
      this.dialogTitle3 = "地址校验";
    },
    submitClick2(val) {
      this.addressCheck(val);
    },
    //关闭弹窗
    closeDialog2() {
      this.dialogVisible2 = false;
    },
    submitClick3(val) {
      this.addressCheck(val);
    },
    //关闭弹窗
    closeDialog3() {
      this.dialogVisible3 = false;
    },
    //获取数量
    async getNavNum() {
      let res = await getNavNum();
      if (res.data.status === 200) {
        this.numObj = res.data.data;
      }
    },

    //addressCheck
    async addressCheck(obj) {
      const res = await addressCheck(obj);
      if (res.data.status === 200) {
        this.$message({
          type: "success",
          message: res.data.msg,
        });
        this.closeDialog2();
        this.getOrderList();
      } else {
        this.$message({
          type: "error",
          message: res.data.msg,
        });
      }
    },
    changeTime(val) {
      if (val) {
        this.searchData.startTime = val[0] / 1000;
        this.searchData.endTime = val[1] / 1000;
      } else {
        delete this.searchData.startTime;
        delete this.searchData.endTime;
      }
    },
  },
  watch: {
    business: {
      handler(val) {
        this.business = val;
        this.status = "PendingItems";
        this.getOrderList();
      },
    },
    status: {
      handler(val) {
        this.status = val;
        this.reset();
      },
    },
  },
};
</script>

<style scoped lang="scss">
.entered {
  padding: 0;
}

.entered-menu {
  min-height: 815px;
}

.tab-left ::v-deep .is-left .el-tabs__item {
  padding: 0 45px;
  height: 100px;
  line-height: 100px;
  font-size: 14px;
}

::v-deep .el-tabs__header.is-left {
  height: 1300px;
}

::v-deep .el-tabs--card > .el-tabs__header {
  border-bottom: 0;
}

::v-deep .el-tabs--card > .el-tabs__header .el-tabs__nav {
  //border: 0;
}

::v-deep .el-tabs--card > .el-tabs__header .el-tabs__item {
  border-bottom: #2e82ff 1px solid;
  //border-left: 0;

  &:hover {
    cursor: pointer;
    color: #2e82ff;
  }
}

::v-deep .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
  border-left: #2e82ff 1px solid !important;
  border-right: #2e82ff 1px solid !important;
  border-top: #2e82ff 1px solid !important;
  color: #2e82ff;
  border-bottom: none;
}

.sku_header_left {
  display: flex;
  justify-content: space-between;
  margin: 5px 0;
}

.vendor {
  display: inline-block;
  width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.imgSrc {
  width: 68px;
  height: 68px;
}

.name {
  width: 190px;
}

::v-deep .el-input__inner {
  height: 32px;
  line-height: 32px;
}

.el-form-item {
  margin-bottom: 0;
}

.right_left {
  //display: flex;
  //justify-content: space-around;
  //align-items: center;
}

::v-deep .el-progress-bar__inner {
  text-align: left;
}

::v-deep .demo-image__preview {
  width: 68px;
  height: 68px;
}

.operate {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
}

.allStyle1 {
  display: flex;
  justify-content: start;
  //align-items: center;
  margin-bottom: 8px;

  ::v-deep .el-image__inner {
    border: 1px solid #f5f5f5;
    border-radius: 5px;
  }

  .demo-image__preview {
    margin-right: 10px;
  }

  .infoStyle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    font-size: 12px;

    .label_name {
      color: #999999;
    }

    .label_val {
      color: #44444f;
    }
  }
}

.allStyle {
  display: flex;
  justify-content: space-around;
  //align-items: center;
  margin-bottom: 8px;

  ::v-deep .el-image__inner {
    border: 1px solid #f5f5f5;
    border-radius: 5px;
  }

  .demo-image__preview {
    margin-right: 10px;
  }

  .infoStyle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    font-size: 12px;

    .label_name {
      color: #999999;
    }

    .label_val {
      color: #44444f;
    }
  }
}

.label_font {
  font-size: 12px;
  color: #999999;
}

::v-deep .el-button--text {
  margin-left: 10px;
}

.shopInfo {
  .label_name {
    color: #999999;
    font-size: 12px;
  }

  .label_val {
    color: #44444f;
    font-size: 12px;
  }
}

.el-col-2 {
  position: fixed;
  left: 0;
  top: 0.68rem;
}

.el-col-22 {
  //margin-left: 8%;
  float: right;
}

.el-table__cell {
  width: auto;
}

::v-deep .el-form-item__content {
  line-height: 32px;
}

::v-deep .el-date-editor .el-range__icon {
  line-height: 26px;
}

::v-deep .el-input__inner {
  width: 100%;
}
</style>
